<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商家首页</title>
    <meta
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
            name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="css/index.css"
          tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/css/style.css"
          rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/css/lu.css">
    <style type="text/css">
        .js-load-more {
            padding: 0 5px;
            width: 120px;
            height: 30px;
            background-color: #00c3ad;
            color: #fff;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            margin: 20px auto;
            border: 0 none;
            font-size: 16px;
            display: none; /*默认不显示，ajax调用成功后才决定显示与否*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.2.1.js"
            tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/js/jquery.min.js"></script>
</head>
<body>
<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">

        <div class="aui-center">
            <span class="aui-center-title"></span>
        </div>

        <a href="domess" class="aui-navBar-item"> <i
                class="header_icon icon-sys"
                style="background-image: url('/images/tongzhi.png');"></i>
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="mui-content">
            <div class="">
                <ul class="mui-table-view">

                    <li class="mui-table-view-cell ">
                        <div class="mui-collapse-content">
                            <div id="slider" class="mui-slider">
                                <div class="mui-slider-group mui-slider-loop">
                                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                                    <div class="mui-slider-item mui-slider-item-duplicate">
                                        <a href="#"> <img src="/images/kong.png">
                                        </a>
                                    </div>
                                    <!-- 第一张 -->
                                    <div class="mui-slider-item">
                                        <a href="#"> <img width="345" height="258" src="/images/lb_1.png">
                                        </a>
                                    </div>
                                    <!-- 第二张 -->
                                    <div class="mui-slider-item">
                                        <a href="#"> <img width="345" height="258" src="/images/lb_2.png">
                                        </a>
                                    </div>
                                    <!-- 第三张 -->
                                    <div class="mui-slider-item">
                                        <a href="#"> <img width="345" height="258" src="/images/lb_3.png">
                                        </a>
                                    </div>
                                    <!-- 第四张 -->
                                    <div class="mui-slider-item">
                                        <a href="#"> <img width="345" height="258" src="/images/lb_4.jpg">
                                        </a>
                                    </div>
                                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                                    <div class="mui-slider-item mui-slider-item-duplicate">
                                        <a href="#"> <img src="/images/kong.png">
                                        </a>
                                    </div>
                                </div>
                                <div class="mui-slider-indicator">
                                    <div class="mui-indicator mui-active"></div>
                                    <div class="mui-indicator"></div>
                                    <div class="mui-indicator"></div>
                                    <div class="mui-indicator"></div>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>


        <div class="aui-fun-clear">
            <div class="aui-palace clearfix">
                <a href="doorder" class="aui-palace-grid">
                    <div class="aui-palace-grid-icon">
                        <img src="img/icon-fun-001.png"
                             tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/images/icon-fun-001.png"
                             alt="">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>今日订单</h2>
                    </div>
                </a> <a href="myshouru" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <img src="img/icon-fun-008.png"
                         tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/images/icon-fun-003.png"
                         alt="">
                </div>
                <div class="aui-palace-grid-text">
                    <h2>店铺收入</h2>
                </div>
            </a> <a href="domyshop" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <img src="img/icon-fun-004.png"
                         tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/images/icon-fun-004.png"
                         alt="">
                </div>
                <div class="aui-palace-grid-text">
                    <h2>我的微店</h2>
                </div>
            </a> <a href="domyservice" class="aui-palace-grid">
                <div class="aui-palace-grid-icon">
                    <img src="img/icon-fun-007.png"
                         tppabs="http://www.17sucai.com/preview/1268063/2018-08-15/home/images/icon-fun-007.png"
                         alt="">
                </div>
                <div class="aui-palace-grid-text">
                    <h2>我的服务</h2>
                </div>
            </a>
            </div>
        </div>
        <div class="aui-news-box"></div>

        <!--加载更多按钮-->
        <div class="js-load-more">加载更多</div>

    </section>
    <footer class="aui-footer">
        <a href="doindex" class="aui-tabBar-item aui-tabBar-item-active">
				<span class="aui-tabBar-item-icon"> <i class="icon icon-home"></i>
			</span> <span class="aui-tabBar-item-text">首页</span>
        </a> <a href="javascript:;" class="aui-tabBar-item"> <span
            class="aui-tabBar-item-icon"> <i class="icon icon-home"></i>
			</span> <span class="aui-tabBar-item-text">购物</span>
    </a> <a href="doservice" class="aui-tabBar-item "> <span
            class="aui-tabBar-item-icon"> <i class="tab-button-icon icon icon-service"></i>
			</span> <span class="aui-tabBar-item-text">服务</span>
    </a> <a href="douser" class="aui-tabBar-item"> <span
            class="aui-tabBar-item-icon"> <i class="tab-button-icon icon icon-my"></i>
			</span> <span class="aui-tabBar-item-text">我的</span>
    </a>
    </footer>
</section>

<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
<script src="/js/lu.js"></script>
<script type="text/javascript">
    mui.init({
        swipeBack: true
        //启用右滑关闭功能
    });
    var newsbox = $(".aui-news-box");

    /*初始化*/
    var counter = 1;
    /*计数器*/
    var pageStart = 0;
    /*offset*/
    var pageSize = 1;
    /*size*/

    /*首次加载*/
    getData(pageStart, pageSize);

    /*监听加载更多*/
    $(document).on('click', '.js-load-more', function () {
        counter++;
        pageStart = counter * pageSize;

        getData(pageStart, pageSize);
    });

    function getData(offset, size) {
        $
            .ajax({
                type: 'GET',
                url: 'news',
                data: {
                    page: counter,
                    postion: "新闻"
                },
                dataType: 'json',
                success: function (reponse) {

                    var data = reponse.data;
                    var sum = reponse.data.length;

                    var result = '';

                    /****业务逻辑块：实现拼接html内容并append到页面*********/

                    //console.log(offset , size, sum);
                    /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
                     * 例如分页数是5，只剩2条，则只取2条
                     *
                     * 实际MySQL查询时不写这个不会有问题
                     */
                    if (sum - offset < size) {
                        size = sum - offset;
                    }

                    /*使用for循环模拟SQL里的limit(offset,size)*/
                    for (var item in reponse.data) {
                        result += '<a href="' + reponse.data[item].url + '" class="aui-flex "><div class="aui-flex-box"><h3>'
                            + reponse.data[item].title
                            + '</h3><p>'
                            + reponse.data[item].posterScreenName
                            + '</p></div><div class="aui-flex-iphone"><img src="' + reponse.data[item].imageUrls + '" alt=""></div></a>';
                        //alert(data.data[item].content);
                    }

                    newsbox.before(result);

                    /*******************************************/

                    /*隐藏more按钮*/
                    if ((offset + size) >= sum) {
                        $(".js-load-more").hide();
                    } else {
                        $(".js-load-more").show();
                    }
                },
                error: function (xhr, type) {
                }
            });
    }
</script>
</body>
</html>
